<template>
  <div>
    <el-form :model="dataForm" label-position="left" :rules="dataRule" ref="dataForm" @ckeyup.enter.native="dataFormSubmit()" label-width="80px">
    
    <!-- <el-form-item label="账户状态" prop="status">
      <el-tag :type="dataForm.status">{{dataForm.status == "success" ? "可用" : "禁用"}}</el-tag>
    </el-form-item> -->
    <el-form-item label="用户名" prop="username">
      <el-input v-model="dataForm.username" placeholder="用户名"></el-input>
    </el-form-item>
    <el-form-item label="权限等级" prop="level">
      <el-radio v-model="dataForm.level" label="1" @change="clickLabel(1)" border>免费使用</el-radio>
      <el-radio v-model="dataForm.level" label="2" @change="clickLabel(2)"  border>按量付费</el-radio>
      <el-radio v-model="dataForm.level" label="3" @change="clickLabel(3)"  border>按月付费</el-radio>
      <!-- <el-input v-model="dataForm.level" placeholder="权限等级[免费使用；按量付费；按月付费]"></el-input> -->
    </el-form-item>
    <el-form-item label="设备数" prop="count">
      <el-input-number v-model="dataForm.count" :min="1" :max="1000" label="发放设备token的数量"></el-input-number>
      <!-- <el-input v-model="dataForm.count" placeholder="发放设备token的数量"></el-input> -->
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="dataForm.phone" placeholder="电话"></el-input>
    </el-form-item>
    <el-form-item label="密钥" prop="ckey">
      <el-input v-model="dataForm.ckey" placeholder="密钥(默认可以不填)"></el-input>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()">立即申请</el-button>
    </span>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        // dataForm: this.dataFormParent,
        dataRule: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          level: [
            { required: true, message: '权限等级不能为空', trigger: 'blur' }
          ],
          count: [
            { required: true, message: '设备数不能为空', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '电话不能为空', trigger: 'blur' }
          ],
          // status: [
          //   { required: true, message: '', trigger: 'blur' }
          // ],
          ckey: [
            { required: true, message: '', trigger: 'blur' }
          ]
        }
      }
    },
    props:['dataForm'],
    methods: {
      init (id) {
        this.$http({
          url: this.$http.adornUrl(`/yisoo/info/${id}`),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.username = data.data.username
            // this.dataForm.status = data.data.status === 1 ? "success" :"danger"
            this.dataForm.email = data.data.email
            this.dataForm.phone = data.data.mobile
          }
        })
        // alert("asdas");
        // this.dataForm.consumerId = id || 0
        // this.$nextTick(() => {
        //   this.$refs['dataForm'].resetFields()
        //   if (this.dataForm.consumerId) {
        //   }
        // })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/product/consumer/reg`),
              method: 'post',
              data: this.$http.adornData({
                'consumerId': this.dataForm.consumerId || undefined,
                'username': this.dataForm.username,
                'level': this.dataForm.level,
                'count': this.dataForm.count,
                'status': 0,
                'email': this.dataForm.email,
                'phone': this.dataForm.phone,
                'ckey': this.dataForm.ckey
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "成功申请，请验证身份",
                  type: "success"
                });
                this.$emit("changeStep",1);
              } else {
                this.$message({
                  message: data.msg,
                  type: "danger"
                });
              }
            })
          }
        })
      },
      clickLabel(ckey){
        if(ckey === 1){
          this.dataForm.count = 100;
          this.$message('免费使用将最多支持100个设备');
        }else if(ckey === 2){
          this.$message('按激活设备总时间计费');

        }else if(ckey === 3){
          this.$message('按激活设备个数每月计费');
        }
      }
    },
    created(){
      // this.init(this.$cookie.get("userid"));
    }
  }
</script>
